<template>
  <div class="container">
    <el-container>
      <el-aside :width="flag ? '200' : '64' + 'px'">
        <Menu ref="menu" />
      </el-aside>
      <el-container>
        <el-header>
          <Header />
        </el-header>
        <el-main
          v-loading="loading"
        >
          <admin-main style="height: 85vh"></admin-main>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import Header from "../../components/admin/Header.vue";
import Menu from "../../components/admin/Menu.vue";
import AdminMain from "./AdminMain.vue";
export default {
  components: { Menu, Header, AdminMain },
  name: "Admin",
  data() {
    return {
      students: [],
      flag: true,
      // loading: this.$store.state.loading,
    };
  },
  created(){

  },
  methods: {},
  computed:{
    loading(){
      return  this.$store.state.loading
    }
  },
  watch: {
    // loading(){
    // }
  },
};
</script>
<style lang="less" scoped>
.container {
  height: 100vh;
}
.el-header,
.el-footer {
  background-color: #fff;
  color: #333;
  text-align: center;
  // line-height: 60px;
}

.el-aside {
  background-color: #6ad;
  color: #333;
  text-align: center;
  // line-height: 200px;
  height: 100vh;
  transition: width 0.15s;
  -webkit-transition: width 0.15s;
  -moz-transition: width 0.15s;
  -webkit-transition: width 0.15s;
  -o-transition: width 0.15s;
}

.el-main {
  // background-color: #e9eef3;
  color: #333;
  text-align: center;
  // line-height: 160px;
}
</style>